
class MenuForSaveModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            menuList: [],
            menu: {},
            cMSNodes: '',
            modalWidth : ''
        };
    }

    menuLevChange(name,value) {
        this.formChange(name,value);
        this.menuLevSelect(parseInt(value));
    }

    cmsChange(value) {
        const cMSNodes = this.state.cMSNodes;
        for (const i in cMSNodes) {
            if (value === cMSNodes[i].type_code) {
                this.state.menu.menuUrl = '/pages/business/cms/app/app_content_view.html?typeCode=' + value + '&isManyNode=true';
                this.setState({menu:this.state.menu});
                break;
            }
        }
    }

    menuLevSelect(level) {
        postJson("/menu/getMenuByLevelBefore.x", {level:level}, (data) => {
            let nodes = this.refs.treeModal.getNodes(data.data,null,'menuPar','menuCode','menuName');
            this.setState({menuList: nodes});
        });
    }

    copyTheIcon() {
        this.refs.iconModal.show({typeData:'https://fontawesome.com/v4.7.0/icons/'});
    }

    save() {
        let menu = this.state.menu;
        menu.type = this.permission?1:0;
        menu.menuLev = menu.menuLev?menu.menuLev:'1';
        menu.menuView = menu.menuView?menu.menuView: '1';

        postJson("/menu/save.x", menu, () => {
            if (this.isModify) {
                layui.layer.msg("修改菜单成功！");
            }
            else
                layui.layer.msg("添加菜单成功！");
            this.close();
        });
    }

    getCMSNodes() {
        postJson("/cms/appResource/queryNodeTree.x", null, (data) => {
            console.log("data:", data);
            this.setState({
                cMSNodes: data.data
            })
        });
    }

    show(data){
        this.isModify = data && data.modify;
        this.permission = data && data.permission;

        let modalWidth = this.permission?'400px':'700px';
        this.setState({modalWidth:modalWidth},()=>{this.refs.modal.show(data)});
        if(!this.isModify)
            this.setState({menu:emptyObj(this.state.menu)});
    }

    close(){
        this.refs.modal.close();
        if(this.props.onClose)
            this.props.onClose();
    }

    formChange(name,value){
        this.state.menu[name] = value;
        this.setState({menu:this.state.menu});
    }

    render() {
        let permstyle = this.permission?{display:'none'}:{};

        return (
            [
                <Modal title="新增菜单" ref="modal" area={[this.state.modalWidth]}>
                    <Form type="pane" size="sm" style={{marginLeft:'5%',marginRight:'5%'}}>
                        <Item>
                            <Label>{this.permission?'权限名称':'菜单名称'}</Label>
                            <Input lay-verify="required" value={this.state.menu.menuName} onChange={(value)=>{this.formChange('menuName',value)}}/>
                        </Item>

                        <Item>
                            <Label>{this.permission?'权限位于':'菜单级别'}</Label>
                            <Select lay-filter="menuLev" value={this.state.menu.menuLev}
                                    onChange={(value) => this.menuLevChange('menuLev',value)}>
                                <option value='1'>一级菜单</option>
                                <option value='2'>二级菜单</option>
                                <option value='3'>三级菜单</option>
                                <option value='4'>四级菜单</option>
                            </Select>
                        </Item>

                        <Item>
                            <Label>上级菜单</Label>
                            <ButtonInput ref="menuPar" size="sm" value={this.state.menu.menuParName}
                                         onClick={()=>{this.refs.treeModal.show({typeData:this.refs.menuPar.inputRef})}}></ButtonInput>
                        </Item>

                        <Item style={permstyle}>
                            <Label>菜单地址</Label>
                            <Input value={this.state.menu.menuUrl} onChange={(value)=>{this.formChange('menuUrl',value)}}
                                   frameStyle={{width: "50%", float: 'left', marginRight: 0}} style={{width: '100%'}}/>

                            {this.state.cMSNodes ?
                                <Select name="typeCode" onChange={(value) => this.cmsChange(value)}>
                                    <option value="-1">请选择CMS节点</option>
                                    {
                                        this.state.cMSNodes.map((node) => {
                                            return <option value={node.type_code}>{node.type_name}</option>
                                        })
                                    }
                                </Select>
                                :
                                <Button btnType="primary" size="sm"
                                        onClick={() => this.getCMSNodes()}>
                                    CMS节点菜单
                                </Button>
                            }
                        </Item>

                        <Item>
                            <Label>是否启用</Label>
                            <Select value={this.state.menu.menuView} onChange={(value)=>this.formChange('menuView',value)}>
                                <option value='1'>是</option>
                                <option value='0'>否</option>
                            </Select>
                        </Item>

                        <Item style={permstyle}>
                            <Label>菜单图标</Label>
                            <Input value={this.state.menu.menuIcon} onChange={(value)=>this.formChange('menuIcon',value)}/>
                            <Button onClick={() => this.copyTheIcon()} size="sm">去官网复制</Button>
                        </Item>

                        <Item>
                            <Label>排序号</Label>
                            <Input value={this.state.menu.menuIndex} onChange={(value)=>this.formChange('menuIndex',value)} lay-verify="required" placeholder="排序号在同级菜单之间生效"/>
                        </Item>

                        <Item>
                            <Label>权限字串</Label>
                            <Input value={this.state.menu.permission} onChange={(value)=>this.formChange('permission',value)} />
                        </Item>

                        <Item>
                            <Button formBtn="true" btnType="normal" lay-submit="true" size="sm" onClick={() => this.save()}>保存</Button>
                        </Item>
                    </Form>
                </Modal>,
                <TreeModal ref="treeModal" nodes={this.state.menuList} errorStr="无上级菜单"
                           onSelected={(string,data)=>{
                               let menuLev = this.state.menu.menuLev;
                               if(data.menuLev != menuLev -1){
                                   console.log("menuLev",this.state.menu,"data",data);
                                   layui.layer.msg("请选择"+(parseInt(menuLev) - 1)+"级菜单作为父菜单!")
                                   return;
                               }
                               this.refs.menuPar.value=string;
                               this.state.menu.menuPar = data.menuCode;
                               console.log("data",data,"menu",this.state.menu);
                           }}>
                </TreeModal>,
                <Modal modalType="iframe" ref="iconModal" area={['950px', '600px']} title='复制图标'></Modal>
            ]
        )
    }
}